<template>
  <!--测试 rangeRef -->
  <el-date-picker
    v-model="val2"
    type="daterange"
    value-format="YYYY-MM-DD"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  /><br>
  ({{model}})
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElDatePicker } from 'element-plus'
  import type { PropType } from 'vue'

  import rangeRef from '../../../../lib/base/ref/ref-model-range'
 
  interface DateRange {
    d1: string,
    d2: string
  }

  export default defineComponent({
    name: 'nf-base-range',
    components: {
      ElDatePicker,
    },
    props: {
      model: {
        type: Object as PropType<DateRange>,
        default: () => {
          return {
            name: '没有赋值'
          }
        }
      },
      colName: {
        type: [String],
        default: 'd1_d2'
      }
    },
    setup(props, context) {

      const arrColName = props.colName.split('_')
      const val = rangeRef<DateRange>(props.model, ['d1', 'd2'])
      const val2 = rangeRef(props.model, arrColName) //
      // const val3 = rangeRef<Person, keyof Person, String>(props.model, props.colName, arrColName) // 

      return {
        val2
      }
    }
  })
</script>